<script setup lang="ts">
import { onMounted, reactive, ref, unref } from 'vue'
import { useRequest } from '@/utils/hooks'
import { handleApi } from '@/utils/alert'
import { message, TableColumnType } from 'ant-design-vue'
import { getMerchOrdersBySKU, updateSKUCode } from "@/api/order.ts";
import { dateFormatter } from "@/utils/common.ts";
import GoodsDetail from "@/components/goods-detail.vue";
import OrderStatus, { OrderStatusProps } from "@/components/order-status.vue";
import OrderErp from "@/components/order-erp.vue";
import Copy from "@/components/copy.vue";
import PostDetail from "@/components/post-detail.vue";
import OrderRemark from '@/components/order-remark.vue'


const emits = defineEmits<{
  (e: 'complete'): void;
  (e: 'cancel'): void;
}>()
const { dataSource, fetch, params, loading } = useRequest(getMerchOrdersBySKU, handleApi)
const props = defineProps<{ order: IOrder }>()
const cLoading = ref(false)

const selectedOrders = ref<string[]>([])

const columns: (TableColumnType & DataIndex<IOrder>)[] = [
  { key: 'goods_info', title: '商品信息', width: 300 },
  { key: 'price&num', title: '单价/数量', width: 100 },
  { key: 'post_info', title: '收件人信息', width: 200 },
  { key: 'seller_words', title: '商家留言/备注', width: 250 },
  { key: 'status', title: '状态', width: 200 },
  { key: 'erp', title: 'ERP信息', width: 200 },
  { key: 'create_time', dataIndex: 'order_create_time', title: '创建时间', width: 200 },
]

onMounted(async () => {
  params.value = { sku_id: props.order.sku_id || '' }
  await fetch()
  if (dataSource.value) {
    // 选择的订单置顶
    dataSource.value = [
      props.order,
      ...dataSource.value.filter(i => i.id !== props.order.id)
    ]
  }
})

const onSelectedChange = (selected: string[]) => {
  selectedOrders.value = selected
}

const editForm = reactive({
  new_sku_code: ''
})

const submitChange = async () => {
  if (!editForm.new_sku_code) {
    message.error('请输入新商家后台商品编码')
  } else if (selectedOrders.value.length === 0) {
    message.error('请选择要修改的订单')
  } else {
    cLoading.value = true
    const res = await updateSKUCode({
      new_sku_code: editForm.new_sku_code,
      sku_id: props.order.sku_id,
      order_id: unref(selectedOrders)
    }).catch(handleApi)
    if (res) {
      emits('complete')
    }
    cLoading.value = false
  }
}

</script>


<template>
  <div class="flex items-center py-4">
    <span class="flex-none text-gray-600 px-4">新商家后台商品编码: </span>
    <AInput v-model:value="editForm.new_sku_code" class="w-[300px]"></AInput>
  </div>

  <ATable
    row-key="order_id"
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="false"
    :scroll="{ x: 1600 }"
    :row-selection="{
      selectedRowKeys: selectedOrders,
      onChange: onSelectedChange,
    }"
  >
    <template #bodyCell="{ column, value, record }">

      <template v-if="column.key === 'goods_info'">
        <div class="flex text-xs text-gray-600 justify-between">
          <span>{{ record.shop_name }}</span>
          <Copy :value="record.order_id" class="opacity-80">
            <span>订单编号: {{ record.order_id }}</span>
          </Copy>
        </div>
        <GoodsDetail v-bind="record" />
      </template>

      <template v-if="column.key === 'price&num'">
        <div class="h-full">
          <div class="text-gray-600 flex flex-col space-y-1 h-14 first:mt-6 text-sm items-center">
            <span>¥{{ record.goods_price }}</span>
            <span>x{{ record.goods_count }}</span>
          </div>
        </div>
      </template>

      <template v-if="column.key === 'post_info'">
        <PostDetail v-bind="record as IOrder"></PostDetail>
      </template>

      <template v-if="column.key === 'seller_words'">
        <OrderRemark v-bind="record"></OrderRemark>
      </template>

      <template v-if="column.key === 'status'">
        <OrderStatus v-bind="record as OrderStatusProps"></OrderStatus>
      </template>

      <template v-if="column.key === 'erp'">
        <OrderErp v-bind="record"></OrderErp>
      </template>

      <template v-if="column.key === 'create_time'">
        {{ dateFormatter(value) }}
      </template>
    </template>
  </ATable>

  <div class="flex justify-end space-x-2 items-center py-4">
    <AButton type="primary" @click="submitChange">确认修改</AButton>
    <AButton @click="() => emits('cancel')">取消</AButton>
  </div>
</template>